<template>
    <section class="event_introduction">
        <aside class="aside">
            <a v-for="(item,index) in descArr" 
              :key="index" 
              :class="classIndex === index ? 'active':''"
              @click="changeDesc(item.key,index)"
            >{{ item.value }}</a>
        </aside>
        <article class="article">
            <div v-html="value"></div>
        </article>
    </section>
</template>

<script>
import { mapActions } from 'vuex';
export default {
    name:"eventIntroduction",
    props:['id'],
    data(){
        return{
          descArr:[
            {
              key:"background",
              value:"赛事描述",
            },
            {
              key:"organization",
              value:"竞赛组织",
            },
            {
              key:"timephase",
              value:"赛程规划",
            },
            {
              key:"data",
              value:"数据描述",
            },
            {
              key:"evaluation",
              value:"评分标准",
            },
          ],
          classIndex:0,
          value:"",
          eventIntroduction:{}
        }
    },
    methods:{
        ...mapActions(['XgetCompetitionInfo']),
        changeDesc(key,index){
          this.classIndex = index
          this.value = this.eventIntroduction[key]
        }
    },
    mounted(){
        this.XgetCompetitionInfo(this.id).then(res => {
          this.eventIntroduction = res.data
          this.value = res.data.background
        })
    }
}
</script>
<style lang="scss" scoped>
    .event_introduction{
        width: 1200px;
        flex:1;
        margin: 0 auto 43px;
        border:1px solid #f7f7f7;
        display: flex;
        
        .aside{
            width:200px;
            .title,a{
                display: block;
                text-align: center;
                margin: 40px;
                font-size:16px;
                color: #333;
            }
        }
        .article{
            width:1000px;
            border-left: 1px solid #f7f7f7;
            padding:40px;
        }
    }
    .active{
      color: #C2142F !important;
    }
</style>
